<template>
    <div class="common-header">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="item in routerItems" :key="item.path" :to="{ path: item.path }">{{
                $t(item.meta.title)
                }}
            </el-breadcrumb-item>
            <slot></slot>
        </el-breadcrumb>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                routerItems: []
            };
        },
        props: {
            modelName: {
                type: String,
                required: false,
                default:"首页"
            }
        },
        computed: {},
        watch: {
            $route() {
        this.getBreadcrumb();
    }
    },
    methods: {
        getBreadcrumb() {
            let route = this.$route;
            let matched = route.matched.filter(item => item.name);
            const first = matched[0];
            if (first && first.name.trim().toLocaleLowerCase() !== 'index'.toLocaleLowerCase()) {
                matched = [
                    {
                        path: '/',
                        meta: {
                            title: this.modelName
                        }
                    }
                ].concat(matched);
            }
            this.routerItems = matched;
        }
    },
    created() {
        this.getBreadcrumb();
    }
    };
</script>
<style scoped>
    .el-breadcrumb {
        width: 100%;
        height: 100%;
        line-height: 50px;
        text-align: start;
        cursor: pointer;
    }
    .logInfo {
        top: 0;
        position: relative;
        display: inline;
    }
    .tempo-api-right-menu-login-icon {
        display: inline-block;
        background-position: 0 -33px;
        margin-right: 20px;
        margin-top: 18px;
        width: 24px;
        height: 25px;
        margin-left: 10px;
    }
    .el-popover {
        padding: 0;
    }
</style>